<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的兑换</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <style>
    .title{
      text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  /*height: 60px;*/
    }
    *{
      -webkit-box-sizing: inherit;
              box-sizing: inherit;
    }
    .top-container{
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
    }
    </style>

</head>
<body style="background:#f7f4f2">
<div id="blank" class="header">
    <div id="back" v-back.tapmode class="back"></div>
    <span class="title">我的兑换</span>
</div>
<div id="app" class="top-container" v-cloak>
  <ul class="aui-list aui-media-list">
  <li class="aui-list-item" v-for="(content, index) in lists">
                  <div class="aui-media-list-item-inner">
                      <div class="aui-list-item-media">
                          <img :src="content.goods_pic">
                      </div>
                      <div class="aui-list-item-inner" >
                          <div class="aui-list-item-text">
                              <div class="aui-list-item-title title" >{{content.goods_name}}</div>
                          </div>
                          <div class="aui-info aui-margin-t-5" style="padding-top:10;margin-top:30px">
                              <div class="aui-info-item">
                                  <span class="aui-margin-l-5">{{content.date_add| date2}}</span>
                                  </div>
                              <!-- <div class="aui-info-item">{{content.date_add| date2}}</div> -->
                          </div>
                          <div class="aui-info aui-margin-t-5" style="padding-top:0px;margin-top:0px">
                              <div class="aui-info-item">
                                  <span class="aui-margin-l-5" style="color:#FF5855">{{content.voucher}}商城券</span>
                                  </div>
                              <div v-show="content.state==1" class="aui-info-item" v-myclick="[content.order_id, appeal]" style="color:#354882">申诉</div>
                              <div v-show="content.state!=1" class="aui-info-item">{{get_state(content.state)}}</div>
                          </div>
                          <!-- <div >
                            <div v-myclick="appeal"  style="width:60px;float:right;color:#354882;font-size:12px">申诉</div>
                          </div> -->
                      </div>
                  </div>
              </li>
            </ul>
            <div style="margin-top:60px" v-show="lists.length==0">
              <img v-src="'../../image/empty.png'" style="margin:0 auto;width:30%">
              <div style="margin:0 auto;color:#999999;text-align:center;padding-top:20px;font-size:12px">您还没有兑换记录</div>
            </div>
            <limit-load v-show="lists.length>0" style="margin:10px 0;"
                  count-per-page="15"
                  :arr="lists" :url="url"
                  ret-attr="list"
                  >
            </limit-load>

</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>

<script>
    var lists;
    var vm;

    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        });
        var data = {
            member_id: getPrefs('member_id'),
            limit_id: 0,
        };
        var callback = function (ret) {
            lists = ret.content.list;
            initApp();
            api.parseTapmode();
        };
        pinet.post(URL.getVoucherOrderList, data, callback);
        api.parseTapmode();
        addListeners();
    };

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                lists: lists,
                url:URL.getVoucherOrderList
            },
            methods:{
              appeal:function(order_id){
                api.openWin({
                    name: 'appeal',
                    url: './appeal.html',
                    pageParam:{
                      order_id:order_id
                    }
                });

              },
              get_state:function(state){
                switch (state) {
                 case '2':
                return '申诉中';
                break;
                 case '3':
                return '申诉成功';
                break;
                  case '4':
                return '申诉失败';
                break;
                 default:
                return '申诉中';
                }
              },
              reload_list:function(){
                var data = {
                    member_id: getPrefs('member_id'),
                    limit_id: 0,
                };
                var callback = function (ret) {
                    vm.lists = ret.content.list;
                };
                pinet.post(URL.getVoucherOrderList, data, callback);
              }
            }
        })
    }

    function addListeners() {
        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret, err) {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            onPageEnd();
            api.closeWin();
        });

        api.addEventListener({
            name: 'exchangeupdate'
        }, function (ret, err) {
            vm.reload_list();
        });
    }

</script>
</html>
